<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路由守卫</title>
</head>
<body>
    <script>
      /**
       *  路由的#号
       *  服务器地址会去请求跳转的路径，如果服务器未配置会返回404
       *  浏览器地址带#号 #号后面的地址变化不会请求服务器以实现本地路由切换
       *  const vue = new Vue({
            router: new VueRouter({
              // mode: 'history', // 去掉url中的#
              routes
            }),
            store,
            render: (h) => h(App),
            data: {
              eventHub: new Vue()
            }
          }).$mount(root);
       * 
       * 
      */
      /**
       *  全局守卫
       * 
       *  beforeEach 进入路由之前
       * 
       *  afterEach 进入路由之后
       * 
       *  路由单独的前置守卫
       *  
       *  beforeEach
       *  例如：
       *  const router = new VueRouter({
       *     routes: [
       *       {
       *          path: '/foo',
       *          component: Foo,
       *          beforeEnter: (to, from, next) => {
       *             // ...
       *          }
       *       }
       *     ]
       *  })
       * 
       *  组件内的守卫
       *    beforeRouterEnter,beforeRouterUpdate.beforeRouterLeave
       * 
       *  beforeRouterEnter中无法获取到this
       *    可以通过给 next回调获取到this
       *    beforeRouteEnter (to, from, next) {
       *      next(vm => {
       *        console.log(vm.data)   //vm.data即this.data
       *      })
       *    }
      */
    </script>
</body>
</html>